<template lang=pug>
    transition(name="fade")
        .shade(v-show="isShow",@click="")
            .toast(v-text="message")
</template>

<script type="es6">
    export default {
        name: 'toast',
        mounted(){
        },
        data () {
            return {}
        },
        props:['message','isShow'],
    }
</script>

<style lang="stylus" scoped>
    @import "../../styles/common.styl"
    .displayNone
        display none

    .shade
        position fixed
        width 100%
        height 100%
        top 0
        background: B=rgba(0,0,0,0.7)
        &.fade-enter-active, &.fade-leave-active
            transition: all 0.3s ease
        &.fade-enter, &.fade-leave-active
            opacity: 0
        .toast
            center()
            height V=5rem
            width V
            font-size .7rem
            borderRadius(.4rem)
            color #fff
            text-align center
            line-height V
            background B
</style>
